<template>
    <div class="container">
      <el-dialog
        title="设置分类加价"
        :visible.sync="dialog.centerDialogVisible"
        @open="open"
        @close="cancel"
        width="800px"
        center
      >
        <div class="top">
          <el-select
            v-model="search.area"
            filterable
            remote
            center
            reserve-keyword
            placeholder="请输入区域"
            :remote-method="insideRemoteMethods"
            :loading="insideArea.loading"
          >
            <el-option
              v-for="item in insideArea.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            size="small"
            type="primary"
            class="handleSearch"
            icon="el-icon-search"
            @click="handleSearch()"
            >查询</el-button
          >
          <el-button
            size="small"
            type="danger"
            class="handleSearch"
            icon="el-icon-delete"
            @click="empty()"
            >清空</el-button
          >
          <el-button
            class="add"
            type="primary"
            size="small"
            icon="el-icon-circle-plus-outline"
            @click="add()"
            >添加加价</el-button
          >
        </div>
        <el-table
          max-height="600"
          :data="tableData"
          border
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="area_name"
            label="区域名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="m_typeMsg"
            label="加价类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="markup"
            label="加价值(元/百分比)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="typeMsg"
            label="预提加价类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="percentage"
            label="预提加价值"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="handleEdit(scope)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          @page="handleSizeChange"
          @pagesize="handleCurrentChange"
          :pageData="pageData"
        ></pagination>
        <el-dialog
          append-to-body
          width="500px"
          :title="dialogCenter.dialogType === 'edit' ? '修改区域' : '添加区域'"
          :visible.sync="dialogCenter.centerDialogVisible"
          center
          @close="cancels"
        >
          <el-form label-width="150px">
            <el-form-item label="区域：">
              <el-select
                v-model="form.area_code"
                filterable
                remote
                center
                reserve-keyword
                placeholder="请输入区域"
                :remote-method="insideRemoteMethod"
                :loading="insideArea.loading"
                @change="areaItem(form.area_code)"
              >
                <el-option
                  v-for="item in insideAreaDialog.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <p class="title">订单预提加价设置</p>
            <el-form-item label="加价类型：">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="加价值(元/百分比)：">
              <el-input-number
                :controls="false"
                v-model="form.percentage"
                controls-position="right"
                :precision="4"
              ></el-input-number>
            </el-form-item>
            <p class="title">订单加价设置</p>
            <el-form-item label="加价类型：">
              <el-select v-model="form.m_type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="加价值(元/百分比)：">
              <el-input-number
                :controls="false"
                v-model="form.markup"
                controls-position="right"
                :precision="4"
              ></el-input-number>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancels">取 消</el-button>
            <el-button type="primary" @click="confirm()">确 定</el-button>
          </span>
        </el-dialog>
      </el-dialog>
    </div>
  </template>
  <script>
  import {
    getCategoryInfo,
    setClassPercentage,
    selectAreaList,
  } from "@/api/commodity/commodityList";
  import Pagination from "@/components/pagination";
  // import { getAreaList } from "@/api/permission/adminlist";
  export default {
    props: {
      dialog: Object,
    },
    components: {
      pagination: Pagination,
    },
    data() {
      return {
        //分页
        pageData: {
          pageSizes: [10, 20],
          pageSize: 10,
          page: 1,
          total: null,
          layout: "total, sizes, prev, pager, next, jumper",
        },
        dialogCenter: {
          dialogType: "",
          centerDialogVisible: false,
          id: "",
        },
        form: {
          goods_code: "",
          type: 1,
          percentage: 0,
          area_code: "",
          area_name: "",
          id: "",
          m_type: 1,
          markup: 0,
        },
        typeList: [
          {
            value: 1,
            label: "按值加价",
          },
          {
            value: 2,
            label: "按比例加价",
          },
        ],
        search: {
          area: "",
        },
        tableData: [],
        insideArea: {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        },
        insideAreaDialog: {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        },
      };
    },
    created() {},
    methods: {
      //关闭
      cancel() {
        this.insideArea = {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        };
        this.search = {
          area: "",
        };
        this.dialog.centerDialogVisible = false;
      },
      empty() {
        this.search = {
          area: "",
        };
      },
      // 关闭弹窗
      cancels() {
        this.dialogCenter.centerDialogVisible = false;
        this.form = {
          goods_code: "",
          type: 1,
          percentage: 0,
          area_code: "",
          area_name: "",
          id: "",
          m_type: 1,
          markup: 0,
        };
        this.insideAreaDialog = {
          innerVisible: false,
          options: [],
          value: "",
          list: [],
          loading: false,
        };
      },
      open() {
        this.getData();
        this.getInsideArea();
      },
      // 获取数据
      getData() {
        let data = {
          limit: this.pageData.pageSize,
          page: this.pageData.page,
          class_code: this.dialog.code,
          area_key: this.search.area,
        };
        getCategoryInfo(data).then((res) => {
          if (res.code == 0) {
            res.data.data.forEach((item) => {
              item.typeMsg = item.type == 1 ? "按值加价" : "按比例加价";
              item.m_typeMsg = item.m_type == 1 ? "按值加价" : "按比例加价";
            });
            this.tableData = res.data.data;
            this.pageData.page = res.data.current_page;
            this.pageData.pagesize = res.data.per_page;
            this.pageData.total = res.data.total;
          }
        });
      },
      getInsideArea(query = "") {
        let data = {
          page: 1,
          limit: 50,
          key: query,
        };
        //获取初始化区域列表
        selectAreaList(data).then((res) => {
          this.insideArea.options = res.data.map((item) => {
            return {
              value: `${item.area_code}`,
              label: `${item.area_name}(${item.area_code})`,
            };
          });
        });
      },
      getInsideAreas(query = "") {
        let data = {
          page: 1,
          limit: 50,
          key: query,
        };
        //获取初始化区域列表
        selectAreaList(data).then((res) => {
          this.insideAreaDialog.options = res.data.map((item) => {
            return { value: `${item.area_code}`, label: `${item.area_name}` };
          });
        });
      },
      // 搜索区域
      insideRemoteMethods(query) {
        if (query !== "") {
          this.getInsideArea(query);
        } else {
          this.insideArea.options = [];
        }
      },
      // 搜索弹窗区域
      insideRemoteMethod(query) {
        if (query !== "") {
          this.getInsideAreas(query);
        } else {
          this.insideAreaDialog.options = [];
        }
      },
      // 本地搜索
      handleSearch() {
        this.pageData.page = 1;
        this.pageData.total = null;
        this.getData();
      },
      areaItem(code) {
        let insidearr = this.insideAreaDialog.options.filter((res) => {
          return res.value == code;
        });
        this.form.area_name = insidearr[0].label;
        console.log(this.form.area_name);
      },
      //添加
      add() {
        this.dialogCenter = {
          dialogType: "",
          centerDialogVisible: true,
          id: "",
        };
        this.getInsideAreas();
      },
      // 编辑
      handleEdit(scope) {
        this.dialogCenter = {
          dialogType: "edit",
          centerDialogVisible: true,
          id: scope.row.id,
        };
        this.form = {
          goods_code: scope.row.erp_goods_code,
          type: scope.row.type,
          percentage: scope.row.percentage,
          area_code: scope.row.area_code,
          area_name: scope.row.area_name,
          id: scope.row.id,
          m_type: scope.row.m_type,
          markup: scope.row.markup,
        };
        this.getInsideAreas();
      },
      //确定
      confirm() {
        if (this.form.area_code) {
          let data = {
            class_code: this.dialog.code,
            type: this.form.type,
            percentage: this.form.percentage,
            area_code: this.form.area_code,
            area_name: this.form.area_name,
            m_type: this.form.m_type,
            markup: this.form.markup,
          };
          if (this.dialogCenter.dialogType == "edit") {
            data.id = this.form.id;
            setClassPercentage(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: res.msg || res.message,
                });
                this.getData();
                this.cancels();
              }
            });
          } else {
            setClassPercentage(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: res.msg || res.message,
                });
                this.getData();
                this.cancels();
              }
            });
          }
        } else {
          this.$message({
            type: "info",
            message: "请选择区域",
          });
        }
      },
      //每页多少条
      handleCurrentChange(val) {
        this.pageData.page = 1;
        this.pageData.pageSize = val;
  
        this.getData();
      },
      //选取页数
      handleSizeChange(page) {
        this.pageData.page = page;
  
        this.getData();
      },
    },
  };
  </script>
  <style scoped>
  .pagination {
    text-align: right;
    padding: 10px;
    background-size: cover;
  }
  .top {
    margin-bottom: 10px;
    width: 100%;
    position: relative;
  }
  .add {
    position: absolute;
    right: 0;
    top: 5px;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  </style>